<template>
  <div class="wrap">
    <div
      class="productionItem"
      v-for="(item, index) in goodsList"
      :key="index"
      @click="checkGoods(item.id)"
    >
      <div class="proIntroWrap">
        <div class="proIntroLeft">
          <img :src="$imgUrl + item.listImgUrl" alt="" class="proPoster" />
        </div>
        <div class="proIntroRight">
          <div class="proIntro">
            {{ resMenuInfo.shopName }}
          </div>
          <div class="workTime">
            <div class="timeLeft">
              {{ item.goodsName }} {{ item.specsName }} ×{{ item.payNum }}
            </div>
            <div class="saleRight"><em class="moneyLogo">￥</em>{{ item.payPrice }}</div>
            <img src="@/assets/circle2.png" alt="" class="circle" v-if="item.isCheck" />
            <img src="@/assets/circle.png" alt="" class="circle" v-else />
          </div>
        </div>
      </div>
    </div>
    <div style="height: 130px"></div>
    <div class="submit" @click="jumpRefund">确定</div>
  </div>
</template>

<script>
import { apiGetUserGoodsOrderDetails } from "@/request/api"; // api接口
import { Switch } from "vant";
export default {
  name: "App",
  data() {
    return {
      id: this.$route.query.menuId,//订单id
      resMenuInfo: "",//订单信息
      goodsList: [],//订单信息里面的商品列表
    };
  },
  mounted() {
    document.querySelector("body").setAttribute("style", "background-color:#F2F4FA");
    this.getUserGoodsOrderDetails();
  },
  methods: {
    getUserGoodsOrderDetails() {
      apiGetUserGoodsOrderDetails({
        id: this.id,
      }).then((res) => {
        this.resMenuInfo = res.data;
        this.goodsList = res.data.goodsList;
        this.goodsList.map((item) => {
          item.isCheck = false; //是否勾选 默认0 未勾选
        });
        console.log("resMenuInfo", this.resMenuInfo);
      });
    },
    //勾选：
    checkGoods(i) {
      var arry = []
      this.goodsList.map((item) => {
        if (item.id == i) {
          item.isCheck = !item.isCheck;
          arry.push(item)
        }else{
          arry.push(item) 
        }
      });
      this.goodsList = arry
    },
    jumpRefund() {
      var jumpArry = []
      this.goodsList.map(item=>{
        if(item.isCheck){
          jumpArry.push(item)
        }
      })
       if(jumpArry.length==0){
         this.$toast.fail('请选择要退款的商品')
         return
      }
      this.$router.push({
        path: "/pages/applyRefund",
        query: {
          //传递参数
          jumpDataList:jumpArry,
          shopId:this.resMenuInfo.shopId,
          menuId:this.id,
          disPrice:this.resMenuInfo.disPrice,
          totalPayPrice:this.resMenuInfo.totalPayPrice,
        },
      });
    },
  },
  created() {},
  components: {
    [Switch.name]: Switch,
  },
};
</script>

<style scoped>
.productionItem {
  width: calc(95% - 30px);
  margin: 0 auto;
  min-height: 110px;
  background: #ffffff;
  border-radius: 20px;
  padding: 5px 15px;
  margin-top: 15px;
}
.proIntroWrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}
.proIntroLeft {
}
.proPoster {
  width: 25%;
  height: 75px;
  position: absolute;
}
.proIntroRight {
  width: 65%;
  margin-top: 10px;
}
.proIntro {
  font-size: 10px;
  font-weight: 400;
  color: #181818;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
em {
  font-style: normal;
}
i {
  display: inline-block;
  width: 1px;
  height: 10px;
  background-color: #ff5252;
  margin: 0px 2px;
}
.workTime {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 400;
  color: #999999;
  margin-top: 15px;
}
.timeLeft {
}
.saleRight {
  color: #ff5757;
  font-size: 15px;
}
.moneyLogo {
  font-size: 10px;
}
.circle {
  width: 20px;
  height: 20px;
}
.submit {
  width: 90%;
  height: 50px;
  line-height: 50px;
  background: #181818;
  box-shadow: 0px 5px 20px 0px rgba(24, 24, 24, 0.26);
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  position: fixed;
  bottom: 40px;
  left: 5%;
}
</style>
